/* styles/main.css */

/* 1. 定义你的 CSS 主题变量 */
:root {
  /* 亮色主题 */
  --color-bkg: #ffffff;
  --color-text-primary: #1f2937;  /* gray-800 */
  --color-text-secondary: #6b7280; /* gray-500 */
  --color-accent: #3b82f6; /* blue-500 */
}

.dark {
  /* 暗色主题 */
  --color-bkg: #111827; /* gray-900 */
  --color-text-primary: #f9fafb; /* gray-50 */
  --color-text-secondary: #9ca3af; /* gray-400 */
  --color-accent: #60a5fa; /* blue-400 */
}

/* 2. 使用新的 @tailwind 指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;


/* 3. 你的全局基础样式 */
html, body, #app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  
  /* 应用主题背景和文字颜色 */
  background-color: var(--color-bkg);
  color: var(--color-text-primary);
  
  /* 平滑的颜色过渡 */
  transition: background-color 0.3s, color 0.3s;
}


@layer utilities {
  /* 当屏幕宽度大于等于 md 断点时，应用以下样式 */
  @screen md {
    .scrollbar-thin-gray {
      /* 
        这里的 '&' 符号是 CSS 嵌套的语法 (Tailwind 支持)。
        它代表父选择器，所以 '&::-webkit-scrollbar' 就等同于
        '.scrollbar-thin-gray::-webkit-scrollbar'。
      */
      &::-webkit-scrollbar {
        height: 6px;  /* 设置水平滚动条的高度 */
        width: 6px;   /* 设置垂直滚动条的宽度 */
      }
      
      &::-webkit-scrollbar-track {
        background: transparent; /* 滚动条轨道背景色，透明 */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #d1d5db; /* 滚动条滑块颜色 (Tailwind gray-300) */
        border-radius: 10px;      /* 滑块圆角 */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #9ca3af; /* 鼠标悬浮时滑块颜色 (Tailwind gray-400) */
      }

      /* --- For Firefox --- */
      scrollbar-width: thin; /* "auto" or "thin" */
      scrollbar-color: #d1d5db transparent; /* thumb-color track-color */
    }
  }
}